<template>
  <BasicModal
    :title="$t('table.member.member_bouns_condition')"
    :okText="$t('table.system.system_conform_save')"
    @ok="okFun"
    :width="bonusConditionsModal"
    @register="RegisterPrizeMadel"
    :showCancelBtn="false"
  >
    <Form :layout="'horizontal'">
      <FormItem
        class="scope_config_modal"
        :labelCol="{ span: labelCol }"
        labelAlign="right"
        v-for="(item, index) in getListPrize"
        :key="index"
        :label="item.label"
      >
        <Row>
          <Col :span="24">
            <InputNumber
              :size="FORM_SIZE"
              :placeholder="$t('common.inputText')"
              v-model:value="item.value"
            >
              <template #addonAfter>
                <div :style="{ width: formLabel + 'px', textAlign: 'left' }">
                  {{ item.afterLabel }}
                </div>
              </template>
            </InputNumber>
          </Col>
        </Row>
      </FormItem>
    </Form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import { updatePrizeConfig, getConfigMemberVip } from '@/api/member/index';
  import { message, FormItem, Row, Col, InputNumber, Form } from 'ant-design-vue';
  import { usePrizeConditonOptions } from '/@/views/common/commonSetting';

  const FORM_SIZE = useFormSetting().getFormSize;
  const getListPrize = ref([] as any);

  import { useFormLabelWidth } from '/@/hooks/setting/useFormLabelSetting';
  const bonusConditions = ref(useFormLabelWidth('bonusConditions'));
  const bonusConditionsModal = ref(bonusConditions.value?.at(0));
  const labelCol = ref(bonusConditions.value?.at(1));
  const formLabel = ref(bonusConditions.value?.at(2));
  const [RegisterPrizeMadel, { closeModal }] = useModalInner(async () => {
    let getData = await getConfigMemberVip({ flag: 3 });
    getData.sort((a, b) => {
      if (a.ty !== b.ty) {
        return a.ty - b.ty;
      } else {
        return b.key.localeCompare(a.key);
      }
    });
    const { prizeConditon } = usePrizeConditonOptions();
    getListPrize.value = getData.map((item) => {
      let tempArray = prizeConditon.filter((list) => list.key === item.key && list.ty === item.ty);
      return {
        ...item,
        value: item.value,
        label: tempArray[0].label,
        afterLabel: tempArray[0].afterLabel,
      };
    });
    console.log('getListPrize.value:', getListPrize.value);
  });
  async function okFun() {
    const params = getListPrize.value.map((item: any) => {
      return {
        key: item.key,
        value: isNaN(parseFloat(item.value)) ? '' : parseFloat(item.value).toString(),
        ty: item.ty,
      };
    });
    console.log('参数值：', params);
    try {
      const { status, data } = await updatePrizeConfig(params);
      if (status) {
        message.success(data);
        closeModal();
      }
    } catch (error) {
      message.error(error);
    } finally {
      console.log('finally:');
    }
  }
</script>
<style scoped lang="less">
  .ant-form-item-label > label,
  .text-horizon-center {
    height: 40px;
    line-height: 40px;
  }
</style>
